const gulp = require('gulp'),
      htmlmin = require('gulp-htmlmin'),
      uglify = require('gulp-uglify'),
      babel = require('gulp-babel'),
      connect = require('gulp-connect'),
      sass = require('gulp-sass'),
      cleanCss = require('gulp-clean-css')


gulp.task("html", function(){
   gulp.src("src/**/*.html")
       .pipe(htmlmin({
           removeComments: true,//清除HTML注释
           collapseWhitespace: true,//压缩HTML
           collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />
           removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
           removeScriptTypeAttributes: false,//删除<script>的type="text/javascript"
           removeStyleLinkTypeAttributes: false,//删除<style>和<link>的type="text/css"
           minifyJS: true,//压缩页面JS
           minifyCSS: true//压缩页面CSS 
          })
    )
       .pipe(gulp.dest("dist"))
       .pipe(connect.reload())
});

//制定一个css任务
gulp.task('css',() => {
   gulp.src('src/css/**/*.scss')
      .pipe(sass())
      .pipe(cleanCss())
      .pipe(gulp.dest('dist/css'))
      .pipe(connect.reload())
})

//制定一个js任务
gulp.task("js", ()=>{
   gulp.src("src/js/**/*.js")
    .pipe(babel({
       presets:['@babel/env']
    }))
    .pipe(uglify())
    .pipe(gulp.dest("dist/js"))
    .pipe(connect.reload())
});

//制定一个开启服务器任务
gulp.task('server',()=>{
   connect.server({
      root: 'dist',
      port: 1221,
      livereload: true
   })
});

//制定imgs任务
gulp.task('img',() => {
   gulp.src('src/images/**/*')
      .pipe(gulp.dest('dist/images'))
});

//制定一个libs任务
gulp.task('libs',() => {
   gulp.src('src/libs/**/*')
      .pipe(gulp.dest('dist/libs'))
});


//zhid一个watch任务
gulp.task('watch',() => {
   gulp.watch('src/**/*.html', ['html'])
   gulp.watch('src/js/**/*.js', ['js'])
   gulp.watch('src/css/**/*.scss',['css'])
   // gulp.watch('src/images/**/*',['images'])
})


//默认会全部执行
gulp.task('default', ['html','css','js','server','img','libs','watch'])
